<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="18">
          <el-input v-model="form.group_id" placeholder="搜索的群组名称/群号"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="search" :loading="button_loading">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <ul class="search-result" v-if="search_result.length!==0">
      查询结果
      <li v-for="item in search_result" @click="add(item.group_id)">
        <div class="title"> {{item.name}}
          <i class="el-icon-plus"></i>
        </div>
        小组介绍：{{item.info}}
      </li>
    </ul>
    <ul class="friend-apply" v-if="group_invite.length!==0">
      <span @click="Init">群组邀请</span>
      <li v-for="item in group_invite" @click="goto(item.group_id)">
        <div class="title">
          {{item.name}}
          <i class="el-icon-circle-check" @click.stop="agree(item.group_id)"></i>
          <i class="el-icon-circle-close" @click.stop="refuse(item.group_id)"></i>
        </div>
        sfasfsafa
      </li>
    </ul>
  </div>
</template>
<script>
  import { groupSearch, groupInviteRead, groupJoin, groupInviteOption } from '@/public/api'

  export default {
    data () {
      return {
        button_loading: false,
        checked: false,
        formLabelWidth: '120px',
        form: {
          group_id: ''
        },
        search_result: [
          {
            name: '',
            group_id: '',
            info: ' '
          }
        ],
        group_invite: []
      }
    },
    methods: {
      search () {
        this.search_result = []
        groupSearch({
          group_id: this.form.group_id
        }).then(
          data => {
            var content = data.data
            for (let i = 0; i < content.length; i++) {
              this.search_result.push({
                name: content[i].name,
                group_id: content[i].group_id,
                info: content[i].Introduction
              })
            }
          }
        )
      },
      Init () {
        groupInviteRead({
          user_id: this.User_id
        }).then(data => {
          if (data.status) {
            this.group_invite.length = 0
            let content = data.data
            for (let i = 0; i < content.length; i++) {
              this.group_invite.push({
                name: content[i].group_info.name,
                group_id: content[i].group_info.group_id
              })
            }
          }
        })
      },
      add (id) {
        groupJoin({
          user_id: this.User_id,
          group_id: id
        }).then(
          data => {
            if (data.status) {
              this.$message('申请加入成功，正在等待群组同意')
            }
          }
        )
      },
      agree (id) {
        console.log(id, '同意')
        this.option(id, true)
      },
      refuse (id) {
        console.log(id, '拒绝')
        this.option(id, false)
      },
      option (id, agree) {
        let option = agree ? 'agree' : 'refuse'
        groupInviteOption({
          user_id: this.User_id,
          group_id: id
        }, option).then(
          data => {
            if (data.status) {
              this.group_invite = this.group_invite.filter(function (value) {
                return value.group_id !== id
              })
              this.$message(`${option}成功`)
              this.$emit('close')
            }
          }
        )
      },
      goto (id) {
        console.log(id, '去看小组的首页')
      },
      onSubmit () {
        this.search()
      }
    },
    created () {
      this.Init()
    },
    watch: {
      User_id (old, newval) {
        this.Init()
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }
  }

</script>
<style scoped>
  /*TODO：部分css与朋友重复*/
  ul {
    border-top: 1px solid black;
    padding-top: 5px;
    /*border-bottom: 1px solid black;*/
  }

  li {
    text-align: left;
    margin: 10px 0;
    /*background: red;*/
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 5px;
  }

  li:hover {
    border: 1px solid black;
    cursor: pointer;
  }

  .title {
    height: 20px;
  }

  .title i {
    float: right;
    line-height: 20px;
    margin: 0 10px;
  }

  i:hover, .search-result li:hover i {
    color: #0f49ee;
  }
</style>
